<!DOCTYPE html>
<html lang="en" xmlns:http="http://www.w3.org/1999/xhtml" xmlns: xmlns:>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"
    />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>福山</title>
    <link rel="stylesheet" type="text/css" href="../css/common.css" />
    <link rel="stylesheet" type="text/css" href="../css/element/elemet-ui.css" />
    <!--<link rel="stylesheet" type="text/css" href="../css/swiper/swiper-4.1.6.min.css" />-->
    <link rel="stylesheet" type="text/css" href="../css/rem.css" />
    <link rel="stylesheet" href="../js/map/DrawingManager_min.css">
    <link rel="stylesheet" href="../css/repeat.css">
    <link href="../assets/css/GA.css" type="text/css" rel="stylesheet">
    <style type="text/css">
        #app {
            width: 100vw;
            height: 100vh;
        }

        .kuang {
            position: relative;
        }

        .kuang .kuangL {
            position: absolute;
            left: 0;
            top: 0;
            width: 18px;
            height: 18px;
            background: url("../assets/image/top-left.png") no-repeat;
        }

        .kuang .kuangR {
            position: absolute;
            right: 0px;
            top: 0;
            width: 18px;
            height: 18px;
            transform: rotate(90deg);
            background: url("../assets/image/top-left.png") no-repeat;
        }

        .kuang .kuangB {
            position: absolute;
            left: 0;
            bottom: -2px;
            width: 18px;
            height: 18px;
            background: url("../assets/image/bottom-left.png") no-repeat;
        }

        .kuang .kuangT {
            position: absolute;
            right: 0;
            bottom: 0;
            width: 18px;
            height: 18px;
            background: url("../assets/image/bottom-right.png") no-repeat;
        }

        .jiadun-container {
            width: 100vw;
            height: 100vh;
            background: url("../assets/image/bigscreen-bj.png") no-repeat;
            background-size: 100%;
            display: flex;
            flex-direction: column;
            flex-wrap: nowrap;
        }

        .jiadun-container .top {
            width: 100%;
            height: 3.7rem;
            border-bottom: 1px solid #16326a;
            background: url("../assets/image/bigscreen-topbj.png") center no-repeat;
        }

        .jiadun-container .top p {
            float: left;
            color: #47cdfe;
            line-height: 3.8rem;
            font-size: 16px;
        }

        .jiadun-container .top p:nth-child(1) {
            margin-left: 40px;
        }

        .jiadun-container .top p:nth-child(2) {
            margin-left: 20px;
        }

        .jiadun-container .top p:nth-child(3) {
            margin-left: 70px;
        }

        .jiadun-container .topNum {
            width: 100%;
            height: 7rem;
        }

        .jiadun-container .topNum .topNumL {
            width: 22%;
            margin-left: 1.5rem;
            height: 5rem;
            float: left;
            border: 1px solid #0b345e;
            margin-top: 1.2rem;
        }

        .jiadun-container .topNum .topNumL .numtilte {
            font-size: 20px;
            color: #0090f4;
            line-height: 5rem;
            margin-left: 20px;
            float: left;
        }

        .jiadun-container .topNum .topNumL .numtrue {
            /* width: 16rem; */
            height: 100%;
            float: left;
            margin-left: 0.5rem;
            cursor: pointer;
        }

        .jiadun-container .topNum .topNumL .numtrue li {
            float: left;
            width: 2.1rem;
            height: 2.8rem;
            line-height: 3rem;
            background-color: #00295c;
            text-align: center;
            color: #00aef4;
            font-size: 2.4rem;
            margin-top: 1.2rem;
            margin-left: 0.1rem;
        }

        .jiadun-container .topNum .topNumC {
            width: 55%;
            margin-left: 1.2rem;
            height: 5rem;
            float: left;
            border: 1px solid #0b345e;
            margin-top: 1.2rem;
            overflow: hidden;
        }

        .jiadun-container .topNum .topNumC .topnumcde li {
            float: left;
            width: 7rem;
            height: 2.4rem;
            margin-left: 1.8rem;
        }

        .jiadun-container .topNum .topNumC .topnumcde li p {
            color: #007bd1;
            font-size: 16px;
            line-height: 2rem;
            text-align: center;
        }

        .jiadun-container .topNum .topNumC .topnumcde li .topnumcde_b {
            width: 139px;
            height: 48px;
            background: url("../assets/image/kuang.png") no-repeat;
            color: #007bd1;
            text-align: center;
        }

        .jiadun-container .topNum .topNumC .topnumcde li .topnumcde_b span {
            font-size: 24px;
            color: #da1515;
            margin-left: 20px;
            line-height: 48px;
            margin-right: 4px;
        }

        .jiadun-container .topNum .topNumC .topnumcde li .topnumcde_b span.tcolorone {
            color: #429fda;
        }

        .jiadun-container .topNum .topNumR {
            max-width: 12%;
            min-width: 12%;
            margin-left: 1.2rem;
            height: 5rem;
            float: left;
            border: 1px solid #0b345e;
            margin-top: 1.2rem;
            color: #0171c1;
            font-size: 18px;
            text-align: center;
        }

        .jiadun-container .topNum .topNumR .jinggao {
            display:inline-block;
            width:100%;
            height: 50%;
            overflow: hidden;
            text-overflow:ellipsis;
            white-space: nowrap;
            font-size: 30px;
            cursor: pointer;
        }
        .jiadun-container .topNum .topNumR .jinggao>i{
            font-style: normal;
            color: #ff7403;
            font-size: 34px;
            position: relative;
            top:2px;    
        }
        

        .jiadun-container .mainbody {
            width: 100%;
            flex: 1;
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            margin-bottom: 1rem;
        }

        .jiadun-container .mainbody .mainbodyL {
            float: left;
            width: 22%;
            height: 100%;
            margin-left: 1.5rem;
            border: 1px solid #0c4d80;
            display: flex;
            flex-direction: column;
            flex-wrap: nowrap;
        }

        .jiadun-container .mainbody .mainbodyL .mainbodyLT {
            width: 100%;
            height: 4rem;
            background-color: #00295c;
            line-height: 4rem;
            font-size: 16px;
            color: #00a7ec;
            padding-left: 0.7rem;
            box-sizing: border-box;
        }

        .jiadun-container .mainbody .mainbodyL .mainbodyLT span {
            display: inline-block;
            float: left;
        }

        .jiadun-container .mainbody .mainbodyL .mainbodyLT .demo-form-inline {
            float: left;
            width: 14rem;
        }

        .jiadun-container .mainbody .mainbodyL .mainbodyLT .demo-form-inline .el-input .el-input__inner {
            background: transparent;
            border: 1px solid #056dad;
        }

        .jiadun-container .mainbody .mainbodyL .mainbodyLT .task {
            width: 3rem;
            height: 1.9rem;
            line-height: 1.9rem;
            text-align: center;
            color: #fff;
            font-size: 14px;
            float: left;
            background-color: #00aef4;
            border-radius: 3px;
            margin-top: 23px;
            cursor: pointer;
        }

        .jiadun-container .mainbody .mainbodyL .mainbodyLB {
            width: 100%;
            flex: 1;
            overflow: auto;
        }

        .jiadun-container .mainbody .mainbodyL .mainbodyLB ul {
            height: 100%;
            overflow-y: auto;
        }

        .jiadun-container .mainbody .mainbodyL .mainbodyLB ul li {
            height: 4.4rem;
            border-top: 1px solid #041229;
            width: 100%;
            border-bottom: 1px solid #0c316e;
            padding-left: 1.7rem;
            box-sizing: border-box;
            font-size: 14px;
            cursor: pointer;
        }

        .jiadun-container .mainbody .mainbodyL .mainbodyLB ul li p:nth-child(1) {
            color: #e30d0d;
            margin-top: 1rem;
        }

        .jiadun-container .mainbody .mainbodyL .mainbodyLB ul li p:nth-child(2) {
            margin-top: 0.5rem;
            color: #e30d0d;
        }

        .jiadun-container .mainbody .mainbodyL .mainbodyLB ul li p.lcolorone {
            color: red;
        }
        .jiadun-container .mainbody .mainbodyL .mainbodyLB ul li p.lcolortwo {
            color: orange;
        }
        .jiadun-container .mainbody .mainbodyL .mainbodyLB ul li p.lcolorthree {
            color: yellow;
        }
        .jiadun-container .mainbody .mainbodyL .mainbodyLB ul li p.lcolorfour {
            color: green;
        }

        .jiadun-container .mainbody .mainbodyL .bottompage {
            width: 100%;
            height: 4.2rem;
            position: relative;
            bottom: 0;
            background-color: #072048;
        }

        .jiadun-container .mainbody .mainbodyR {
            flex: 1;
            width: 100%;
            background-color: #fff;
            margin-left: 1.2rem;
            margin-right: 1.2rem;
            position: relative;
        }

        .jiadun-container .mainbody .mainbodyR .mapleftbox {
            width: 9.4rem;
            height: 10rem;
            background-color: #08224d;
            position: absolute;
            left: 0.5rem;
            top: 0.5rem;
        }

        .jiadun-container .mainbody .mainbodyR .mapleftbox span {
            color: #0076ca;
        }

        .jiadun-container .mainbody .mainbodyR .maprightbox,.maprightboxline {
            width: 20.5rem;
            height: 29rem;
            background: #111e3f;
            position: absolute;
            right: 10px;
            top: 3rem;
            border-radius: 5px;
            z-index: 99999;
        }
        .jiadun-container .mainbody .mainbodyR .maprightboxline {
            z-index: 999991;
        }
        .jiadun-container .mainbody .mainbodyR .maprightbox .maprtop  ,.maprightboxline .maprtop{
            width: 100%;
            height: 2.5rem;
            background-color: #00295c;
            color: #47cdfe;
            font-size: 20px;
            line-height: 2.5rem;
            text-indent: 1rem;
        }

        .jiadun-container .mainbody .mainbodyR .maprightbox .maprbody {
            width: 100%;
            height: auto;
            padding: 0px 0.75rem;
            box-sizing: border-box;
        }

        .jiadun-container .mainbody .mainbodyR .maprightbox .maprbody .bodytop {
            width: 100%;
            height: 2.5rem;
            border-bottom: 1px solid #0c316e;
        }

        .jiadun-container .mainbody .mainbodyR .maprightbox .maprbody .bodytop span {
            font-size: 20px;
            color: #da1515;
            text-indent: 2.5rem;
            line-height: 2.5rem;
        }

        .jiadun-container .mainbody .mainbodyR .maprightbox .maprbody .bodytop .bodytopi {
            float: right;
            margin-right: 2rem;
            margin-top: 0.5rem;
            display: inline-block;
            width: 1.4rem;
            height: 1.4rem;
            background: url("../assets/image/locateinformation.png") no-repeat;
            background-size: 100% 100%;
            cursor: pointer;
        }

        .jiadun-container .mainbody .mainbodyR .maprightbox .maprbody .bodymain {
            width: 100%;
            position: relative;
            height: auto;
        }

        .jiadun-container .mainbody .mainbodyR .maprightbox .maprbody .bodymain .bodyimg {
            width: 5.5rem;
            height: 6.3rem;
            position: absolute;
            right: 0px;
            top: 0.75rem;
            background-color: #87ceeb;
        }

        .jiadun-container .mainbody .mainbodyR .maprightbox .maprbody .bodymain .bodymaint {
            width: auto;
            height: 2rem;
            line-height: 2rem;
            color: #00aef4;
            font-size: 16px;
        }

        .jiadun-container .mainbody .mainbodyR .maprightbox .maprbody .bodymain .bodymainul li {
            width: auto;
            height: 1.8rem;
            line-height: 1.8rem;点点滴滴
        }

        .jiadun-container .mainbody .mainbodyR .maprightbox .maprbody .bodymain .bodymainul li .lileft {
            color: #025b9b;
        }

        .jiadun-container .mainbody .mainbodyR .maprightbox .maprbody .bodymain .bodymainul li .liright {
            color: #00aef4;
        }

        .jiadun-container .mainbody .mainbodyR .maprightbox .maprbody .bodymain .selectimemap {
            width: 100%;
            height: atuo;
        }

        .jiadun-container .mainbody .mainbodyR .maprightbox .maprbody .bodymain .selectimemap .lileft {
            color: #025b9b;
            line-height: 2rem;
        }

        .jiadun-container .mainbody .mainbodyR .maprightbox .maprbody .bodymain .selectimemap .btnline {
            float: left;
            width: 1.5rem;
            height: 1.5rem;
            background: url("../assets/image/trajectory.png") no-repeat;
            background-size: 100% 100%;
            margin-left: 0px;
            cursor: pointer;
        }

        .datagrid-header-check {
            position: relative !important;
        }

        .datagrid-header-check>input {
            position: absolute;
            visibility: hidden;
        }

        .datagrid-header-check>input+label {
            display: inline-block;
            width: 16px;
            height: 16px;
            border: 1px solid #0e5283;
            cursor: pointer;
        }

        .datagrid-header-check>input:checked+label:after {
            content: '';
            position: absolute;
            left: 3px;
            bottom: 12px;
            width: 8px;
            height: 4px;
            border: 3px solid #19d8ea;
            border-top-color: transparent;
            border-right-color: transparent;
            -ms-transform: rotate(-60deg);
            -moz-transform: rotate(-60deg);
            -webkit-transform: rotate(-60deg);
            transform: rotate(-45deg);
        }

        .datagrid-header-check>input:checked:hover+label:after {
            content: '';
            opacity: 1;
            position: absolute;
            left: 3px;
            bottom: 12px;
            width: 8px;
            height: 4px;
            border: 3px solid #19d8ea;
            border-top-color: transparent;
            border-right-color: transparent;
            -ms-transform: rotate(-60deg);
            -moz-transform: rotate(-60deg);
            -webkit-transform: rotate(-60deg);
            transform: rotate(-45deg);
        }

        /* 定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸 */

        ::-webkit-scrollbar {
            width: 10px;
            height: 10px;
            background-color: transparent;
        }

        /* 定义滚动条轨道 内阴影+圆角 */

        ::-webkit-scrollbar-track {
            -webkit-box-shadow: inset 0 0 6px #fff;
            border-radius: 10px;
            background-color: #f5f5f5;
        }

        /* 定义滑块 内阴影+圆角 */

        ::-webkit-scrollbar-thumb {
            border-radius: 10px;
            -webkit-box-shadow: inset 0 0 6px #00a7ec;
            background-color: #00a7ec;
        }
        .jiadun-container .topNum .topNumC .topnumcde .swiper-box {
            float: left;
            /* width: 7rem; */
            height: 2.4rem;
            margin-left: 2.2rem;
        }

        .jiadun-container .topNum .topNumC .topnumcde .swiper-box p {
            color: #007bd1;
            font-size: 16px;
            width: 100%;
            line-height: 2rem;
            text-align: center;
        }

        .jiadun-container .topNum .topNumC .topnumcde .swiper-box .topnumcde_b {
            width: 139px;
            height: 48px;
            background: url("../assets/image/kuang.png") no-repeat;
            color: #007bd1;
            text-align: center;
        }

        .jiadun-container .topNum .topNumC .topnumcde .swiper-box .topnumcde_b span {
            font-size: 24px;
            color: #da1515;
            margin-left: 20px;
            line-height: 48px;
            margin-right: 4px;
        }

        .jiadun-container .topNum .topNumC .topnumcde .swiper-box .topnumcde_b span.tcolorone {
            color: #429fda;
        }
        #my-swiper-content{
            height:100%;
            overflow:hidden
        }
        .my-slider{
            height:100%;
            overflow: hidden;
            float: left;
        }
        #my-swiper{
            position: relative;
        }
        .jiadun-container .mainbody .mainbodyR .maprightbox .maprbody .bodytop span.lcolorone{
            color: red;
        }
        .jiadun-container .mainbody .mainbodyR .maprightbox .maprbody .bodytop span.lcolortwo{
            color: orange;
        }
        .jiadun-container .mainbody .mainbodyR .maprightbox .maprbody .bodytop span.lcolorthree{
            color: yellow;
        }
        .jiadun-container .mainbody .mainbodyR .maprightbox .maprbody .bodytop span.lcolorfour{
            color: green;
        }
        .marbodytop{
            height: 56px;
            width:100%;
            background-color: #101c3c;
        }
        .detailline{
            width: 100%;
            height: 23.2rem;
            overflow-y: auto;
            background-color: #111e3f;
            margin-top: 5px;
        }
        .detailline ul li{
            height: 56px;
            width: 100%;
            background: url("../assets/image/circleline.png") 20px no-repeat;
        }
        .detailline ul li i{
            color: #00aef4;
            font-style: normal;
            line-height: 56px;
            display: inline-block;
            margin-left: 21px;
            float: left;
            width: 25px;
            margin-top: 16px;
            font-size: 12px;
            height: 25px;
            text-align: center;
            line-height: 25px;
        }
        .detailline ul li .troad{
            float: left;
            width: 80%;
            color: #00aef4;
            margin-left:20px;
            margin-top: 10px;
        }
        .detailline ul li .ttime{
            float: left;
            width: 80%;
            color: #054f88;
            margin-left:20px;
        }
        .el-select-dropdown.el-popper{
            z-index:999999!important;
        }

    </style>
</head>

<body class="bighome">
    <div id="app" class="jiadun-container" v-cloak>
        <div class="top">
            <p>{{atime}}</p>
            <p>{{btime}}</p>
            <p>{{ctime}}</p>
            <el-button type="primary" size="big" @click="window.location.href='bigHome2.html'" style="margin-top:.7rem;position:absolute;right:7rem;">
                地界防控
            </el-button>
            <el-button type="text" size="mini" @click="goBack" style="position:absolute;right:2rem;margin-top:1rem">
                退出登录
            </el-button>
        </div>
        <div class="topNum">
            <div class="topNumL kuang">
                <span class="kuangL"></span>
                <span class="kuangR"></span>
                <span class="kuangB"></span>
                <span class="kuangT"></span>
                <span class="numtilte">总管控人口</span>
                <ul class="numtrue" @click="enterpeopledetail">
                    <li v-for="(item,index) in tabdata" :key="index">{{item}}</li>
                    <!-- <li>1</li>
                <li>1</li>
                <li>1</li>
                <li>1</li>
                <li>1</li>
                <li>1</li> -->
                </ul>

            </div>
            <div class="topNumC kuang">
                <span class="kuangL"></span>
                <span class="kuangR"></span>
                <span class="kuangB"></span>
                <span class="kuangT"></span>
                <ul class="topnumcde" ref="swipercontainer" style="width: 1132px;">
                    <div ref="swiper" id="my-swiper" style="height:100%">
                        <div ref="slider" class="my-slider">
                            <div v-for="(slide,index) in cetop" :key="index" class="swiper-box" style="height:100%">
                                <p>{{slide.k}}</p>
                                <div class="topnumcde_b">
                                    <span :class="slide.pname|chosecolor">{{slide.v}}</span>
                                    人
                                </div>
                            </div>
                        </div>
                        <div class="my-slider" ref="slider2" id="slider2" v-if="cetop.length>5">
                            <div v-for="(slide,index) in cetop" :key="index" class="swiper-box" style="height:100%">
                                <p>{{slide.k}}</p>
                                <div class="topnumcde_b">
                                    <span :class="slide.pname|chosecolor">{{slide.v}}</span>
                                    人
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- <swiper :options="swiperOption" ref="swiper">
                        <swiper-slide v-for="(slide,index) in cetop" :key="index">
                            <p>{{slide.pname}}</p>
                            <div class="topnumcde_b">
                                    <span :class="slide.pname|chosecolor">{{slide.pnum}}</span>
                                    人
                            </div>
                        </swiper-slide>

                    </swiper> -->

                    <!-- <li>
                  <p>涉藏人员</p>
                  <div class="topnumcde_b">
                    <span style="color:#429fda">2096</span>
                    人
                  </div>
                </li>
                <li>
                  <p>上访人员</p>
                  <div class="topnumcde_b">
                    <span style="color:#26c52a">2096</span>
                    人
                  </div>
                </li>
                <li>
                  <p>逃犯</p>
                  <div class="topnumcde_b">
                    <span style="color:#ff7403">2096</span>
                    人
                  </div>
                </li>
                <li>
                  <p>外来前科人员</p>
                  <div class="topnumcde_b">
                    <span style="color:#ffcc00">2096</span>
                    人
                  </div>
                </li>
                <li>
                  <p>辖区重点人口</p>
                  <div class="topnumcde_b">
                    <span style="color:#00d0c4">2096</span>
                    人
                  </div>
                </li> -->
                </ul>
                <!--<ul class="topnumcde">-->
                    <!--<swiper :options="swiperOption"  ref="mySwiper">-->
                        <!--<swiper-slide v-for="(slide,index) in cetop" :key="index">-->
                            <!--<li style="height:100%">-->
                                <!--<p>{{slide.k}}</p>-->
                                <!--<div class="topnumcde_b">-->
                                    <!--<span :class="slide.pname|chosecolor">{{slide.v}}</span>-->
                                    <!--人-->
                                <!--</div>-->
                            <!--</li>-->
                        <!--</swiper-slide>-->

                    <!--</swiper>-->

                    <!--&lt;!&ndash; <li>-->
                  <!--<p>涉藏人员</p>-->
                  <!--<div class="topnumcde_b">-->
                    <!--<span style="color:#429fda">2096</span>-->
                    <!--人-->
                  <!--</div>-->
                <!--</li>-->
                <!--<li>-->
                  <!--<p>上访人员</p>-->
                  <!--<div class="topnumcde_b">-->
                    <!--<span style="color:#26c52a">2096</span>-->
                    <!--人-->
                  <!--</div>-->
                <!--</li>-->
                <!--<li>-->
                  <!--<p>逃犯</p>-->
                  <!--<div class="topnumcde_b">-->
                    <!--<span style="color:#ff7403">2096</span>-->
                    <!--人-->
                  <!--</div>-->
                <!--</li>-->
                <!--<li>-->
                  <!--<p>外来前科人员</p>-->
                  <!--<div class="topnumcde_b">-->
                    <!--<span style="color:#ffcc00">2096</span>-->
                    <!--人-->
                  <!--</div>-->
                <!--</li>-->
                <!--<li>-->
                  <!--<p>辖区重点人口</p>-->
                  <!--<div class="topnumcde_b">-->
                    <!--<span style="color:#00d0c4">2096</span>-->
                    <!--人-->
                  <!--</div>-->
                <!--</li> &ndash;&gt;-->
                <!--</ul>-->
            </div>
            <div class="topNumR kuang">
                <span class="kuangL"></span>
                <span class="kuangR"></span>
                <span class="kuangB"></span>
                <span class="kuangT"></span>
                <span style="position:absolute;left:50%;height:auto;top:10%;transform:translateX(-50%)">实时警告</span>
                <span :title="warnsum+'条'" style="position:absolute;left:50%;top:40%;transform:translateX(-50%)" class="jinggao"><i>{{warnsum}}</i>条</span>
                
            </div>
        </div>
        <div class="mainbody">
            <div class="mainbodyL kuang">
                <span class="kuangL"></span>
                <span class="kuangR"></span>
                <span class="kuangB"></span>
                <span class="kuangT"></span>
                <div class="mainbodyLT">
                    <span style="margin-left: 30px">实时告警区</span>
                    <!--<el-form :inline="true" :model="formInline" class="demo-form-inline topform" style="height:4rem;overflow:hidden">-->
                        <!--<el-form-item label="" style="width:6rem;margin-top:1rem">-->
                            <!--<el-select v-model="selectoptionvalue" placeholder="类型" @change="showgrouppeople">-->
                                <!--<el-option v-for="item in selectoption" :key="item.key" :label="item.value" :value="item.key">-->
                                <!--</el-option>-->
                            <!--</el-select>-->
                        <!--</el-form-item>-->
                        <!--<el-form-item label="" style="width:6.5rem;margin-top:1rem;">-->
                            <!--<el-input v-model="searchdata"  @blur="search" @keyup.enter.native="search" placeholder="请输入关键词"></el-input>-->
                        <!--</el-form-item>-->
                    <!--</el-form>-->
                    <div class="task" @click="enterpeople" style="position:absolute;right:2rem;width:auto;padding:0 .5rem">任务列表</div>
                </div>
                <div class="mainbodyLB">
                    <ul>
                        <li v-for="(item,index) in celeft" :key="index" @click="showrightdetaile(item)">
                            <p :class="item.t_grade | chosecolortwo">{{item.tasktypename }} {{item[item.dataType]}} {{item.flag | inout}}辖区</p>
                            <p :class="item.t_grade | chosecolortwo">{{item.date}}</p>
                        </li>
                        <!-- <li>
                      <p style="color:#ffcc00">[前科人员] 1522xxxxxxxxxxxxx 进入辖区</p>
                      <p style="color:#ffcc00">20180202 12:02:21</p>
                    </li> -->
                    </ul>
                </div>
                <!--<div class="bottompage">-->
                    <!--&lt;!&ndash;<el-pagination background layout="prev, pager, next" @current-change="handleCurrentChange" :current-page.sync="current" :page-size="total"&ndash;&gt;-->
                        <!--&lt;!&ndash;:total="1000" style="float:right;margin-top:1.5rem">&ndash;&gt;-->
                    <!--&lt;!&ndash;</el-pagination>&ndash;&gt;-->
                    <!--&lt;!&ndash; <el-pagination  layout="prev, pager, next" :total="">-->
                <!--</el-pagination> &ndash;&gt;-->
                <!--</div>-->
            </div>
            <div class="mainbodyR">
                <div class="bigdiv" style="width:100%;height:100%">
                    <my-map :optiona="mapoption" ref="selectmap"></my-map>
                </div>
                <div class="mapleftbox" style="">
                    <div class="" style="height:100%;width:100%;overflow:auto">
                        <div class="datagrid-header-check" style="margin-top:10px;margin-left:10px;" v-for="item in selectoption" :key="item.key">
                            <input name="searchFilter" type="checkbox" :value="item.value" :id='item.key' @click="choseleft(item.key)" />
                            <label class="x-input" :for="item.key"></label>
                            <span :title="item.value" style="display:inline-block;line-height: 18px;width:75%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">{{item.value}}</span>
                        </div>
                    </div>
                </div>
                <div class="maprightbox" v-show='showdetailtask'>
                    <div class="maprtop">详情
                        <i @click='deletexiangqing' class="el-icon-circle-close-outline" style="cursor:pointer;float: right;margin-top: 20px;margin-right: 20px;"></i>
                    </div>
                    <div class="maprbody">
                        <div class="bodytop">
                            <span :class="formdetail.choosecolor | chosecolortwo " :title="formdetail.tasktype" style="display:inline-block;width:75%;height:100%">{{formdetail.tasktype}}</span>
                            <i class="bodytopi" style="display:inline-block" @click='showendpoint'></i>
                        </div>
                        <div class="bodymain">
                            <div class="bodyimg"></div>
                            <span class="bodymaint">个人信息</span>
                            <ul class="bodymainul">
                                <li>
                                    <span class="lileft" style="color:#00aef4;">
                                        <i style="font-style:normal" v-if="formdetail.dataType">{{formdetail.dataType}}： {{formdetail[formdetail.dataType]}}</i>
                                        <i v-else style="font-style:normal">未知</i>
                                        <!-- {{formdetail.imei | ImeiFiltersc(formdetail.imsi,formdetail.mac)}} -->
                                    </span>
                                    <span class="liright"></span>
                                </li>
                                <li>
                                    <span class="lileft">进入时间：</span>
                                    <span class="liright">{{formdetail.intime}}</span>
                                </li>
                                <li>
                                    <span class="lileft">离开时间：</span>
                                    <span class="liright">{{formdetail.outtime}}</span>
                                </li>
                                <li>
                                    <span class="lileft">首次采集时间：</span>
                                    <span class="liright"></span>
                                </li>
                                <li>
                                    <span class="lileft">最后采集时间：</span>
                                    <span class="liright">{{formdetail.lasttime}}</span>
                                </li>
                                <li>
                                    <span class="lileft">驻留天数：</span>
                                    <span class="liright"></span>
                                </li>
                                <li>
                                    <span class="lileft">姓名：</span>
                                    <span class="liright">{{formdetail.name}}</span>
                                </li>
                                <li>
                                    <span class="lileft">民族：</span>
                                    <span class="liright"></span>
                                </li>
                                <li>
                                    <span class="lileft">身份证号：</span>
                                    <span class="liright">{{formdetail.idcode}}</span>
                                </li>
                                <li>
                                    <span class="lileft">联系电话：</span>
                                    <span class="liright">{{formdetail.phonenum}}</span>
                                </li>
                            </ul>
                            <div class="selectimemap">
                                <span class="lileft" style="display:inline-block;float:left">人员轨迹：</span>
                                <div>
                                    <el-date-picker v-model="valuetime" value-format="yyyy-MM-dd HH:mm:ss" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
                                        style="width:14rem;margin:0px;float:left">
                                    </el-date-picker>
                                </div>
                                <div class="btnline" @click='showpeopleline'></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="maprightboxline" v-show="showdetailtaskline">
                    <div class="maprtop">轨迹分析
                        <i @click='deletexiangqingline' class="el-icon-circle-close-outline" style="cursor:pointer;float: right;margin-top: 20px;margin-right: 20px;"></i>
                    </div>
                    <!--<div class="marbodytop">-->
                        <!--<el-form :inline="true" :model="formInline" class="demo-form-inline topform" style="height:4rem;overflow:hidden;z-index:999999">-->
                            <!--<el-form-item label="" style="width:auto; margin-left:1rem;margin-top:0.4rem;z-index:999999">-->
                                <!--<el-select v-model="selectoptiontimevalue" placeholder="请选择轨迹间隔时间" @change="showgrouppeople" style="z-index:999999">-->
                                    <!--<el-option v-for="item in selectoptiontime" :key="item.key" :label="item.value" :value="item.key">-->
                                    <!--</el-option>-->
                                <!--</el-select>-->
                            <!--</el-form-item>-->
                        <!--</el-form>-->
                    <!--</div>-->
                    <div class="detailline">
                        <ul>
                            <li v-for="(item,index) in showdetailtasklinearr" :key="index">
                                <i>{{index+1}}</i>
                                <p class="troad">{{item.areacode}}</p>
                                <p class="ttime">{{item.time}}</p>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 引入组件库 -->
    <script type="text/javascript" src="../js/vue/vue.js"></script>
    <script src="../js/jquery-3.0.0.min.js.js"></script>
    <script type="text/javascript" src="../js/element/element.js"></script>
    <script type="text/javascript" src="../js/swiper/swiper-4.1.6.min.js"></script>
    <!--<script src="https://cdn.jsdelivr.net/npm/vue-awesome-swiper@3.1.2/dist/vue-awesome-swiper.js"></script>-->
    <script type="text/javascript" src="../js/urls.js"></script>
    <script src="../js/axios.min.js"></script>
    <script type="text/javascript" src="../js/utils.js"></script>
    <script src="../js/map/baiduInterface.js"></script>
    <script src="../js/mapComponent.js"></script>

    <script type="text/javascript">
        var vm;
        vm = new Vue({
            el: '#app',
            data: {
                formdetail: {
                    imei:'',
                    imsi:'',
                    mac:'',
                    dataType:'',
                    choosecolor:''
                },
                warnsum:'0',
                valuetime: [],
                choseleftdata: [],
                searchdata:'',
                showdetailtask: false,
                showdetailtaskline:false,
                showdetailtasklinearr: [],
                mapoption: {
                    chooseoption: [],
                    chooseoptiontwo: [],
                    chooseoptionfalse: [],
                    chooseoptionfalsetwo: [],
                    peopoleoption: [],
                    peopoleoptionone: [],
                    peopoleendpoint:[]

                },
                peopoleendpointq:[],
                value3: [],
                msg: 'Template',
                swiperOption: {
                    slidesPerView: 6,
                    width: 1132,
                    speed: 3000,
                    noSwiping: true,
                    // init: false,
                    autoplay: {
                        delay: 10,
                        stopOnLastSlide: false,
                        disableOnInteraction: true
                    },
                    observer:true, // 修改swiper自己或子元素时，自动初始化swiper
                    observeParents:true,// 修改swiper的父元素时，自动初始化swiper
                    loop: true,
                    notNextTick: true,
                    onSlideChangeEnd: function(swiper){
                        swiper.update();
                        this.startAutoplay();
                        this.reLoop();
                    }
                },
                swiperSlides: [1, 2, 3, 4, 5],
                list: [],
                cetop: [],
                celeft: [],
                formInline: {
                    user: '',
                    region: ''
                },
                atime: '',
                btime: '',
                ctime: '',
                selectoption: [{value:11111111111111111111111111111,key:111111111111111111111111111}],
                selectoptionvalue: '',
                selectoptiontime:[
                    {
                        "key":"1",
                        "value":"2"
                    },
                    {
                        "key":"2",
                        "value":"3"
                    }
                ],
                selectoptiontimevalue:'',
                numberall: '123',
                pagesezi: 1000,
                pagenum: 1,
                current: 1,
                total: 100,
                choosecolor: ''
            }, created: function () {
                this.initedate()
                this.initeselect()
                this.initepeolpel()
                this.intiline()
                this.initdata()
            },
            mounted: function () {
            },
            methods: {
                // 测试方法
                test() {
                    let self = this
                    self.$NotifyUtil({
                        title: 'dsadn'
                    })
                },
                // 初始化时间代码
                initedate() {
                    let self = this
                    //  let time = new this.Otime()
                    setInterval(() => {
                        let odate = new Date()
                        let day = ''
                        let datede =
                            odate.getFullYear() +
                            '年' +
                            (odate.getMonth() * 1 + 1) +
                            '月' +
                            odate.getDate() +
                            '日'
                        let t =
                            this.isTen(odate.getHours()) +
                            ':' +
                            this.isTen(odate.getMinutes()) +
                            ':' +
                            this.isTen(odate.getSeconds())
                        switch (odate.getDay()) {
                            case 0:
                                day = '星期天'
                                break
                            case 1:
                                day = '星期一'
                                break
                            case 2:
                                day = '星期二'
                                break
                            case 3:
                                day = '星期三'
                                break
                            case 4:
                                day = '星期四'
                                break
                            case 5:
                                day = '星期五'
                                break
                            case 6:
                                day = '星期六'
                                break
                            default:
                                day = '星期天'
                                break
                        }
                        self.atime = datede
                        self.btime = day
                        self.ctime = t
                    }, 1000)
                },
                Otime() { },
                // 处理时间判断是否为10
                isTen(num) {
                    return num / 10 >= 1 ? num : '0' + num
                },
                // 初始化下拉框
                initeselect() {
                    let option = {
                        method: 'GET',
                        url: 'fs/task/findType'
                    }
                    let self = this
                    this.$HttpUtil(option, res => {
                        if (res.code === 0) {
                            this.selectoption = res.data
                            // console.log(res.data)
                        } else {
                            this.$NotifyUtil({
                                title: '失败',
                                message: res.msg,
                                type: 'error'
                            })
                        }
                    })
                },
                // 初始化人员列表
                initepeolpel() {
                    let option = {
                        method: 'GET',
                        url: 'fs/task/findPeopleSum'
                    }
                    let self = this
                    this.$HttpUtil(option, res => {
                        if (res.code === 0) {
                            self.numberall = res.data
                        } else {
                            this.$NotifyUtil({
                                title: '失败',
                                message: res.msg,
                                type: 'error'
                            })
                        }
                    })
                },
                // 初始化最开始的数据
                initdata(){
                   //  alert(1) law/fs/task/findSum
                    let option = {
                        method: 'GET',
                        url: 'fs/task/findSum'
                    }
                    let self = this
                    this.$HttpUtil(option, res => {
                        if (res.code === 0) {
                       // console.log(res.data)
                        self.warnsum = res.data.warnSum.v
                        if(res.data.sumList.length>=1){
                            self.cetop=[]
                            self.cetop=res.data.sumList
                        }
                        // self.numberall = res.data
                    } else {
                        this.$NotifyUtil({
                            title: '失败',
                            message: res.msg,
                            type: 'error'
                        })
                    }
                })
                },
                // 显示人员组
                showgrouppeople(a) { },
                // 查询方法
                search() {
                    let self = this
                    // alert(this.searchdata)
                    // console.log(self.searchdata)
//                    setTimeout(function () {
//
//                    },1000)
                },
                // 分页的触发
                handleCurrentChange(val) {
                   // alert(val)
                },
                // 下拉框的选择获取对应的数据
                choseleft(key) {
                    // alert(key+'de')
                   // alert(key)
                    // console.log(typeof (key))
                    let self = this
                    if (document.getElementById(key).checked === true) {
                        self.choseleftdata.push(key);
//                        self.mapoption.chooseoptiontwo= [
//                            {
//                                "rowkey":"mac_imsi_imei_8703",
//                                "time":"20180305",
//                                "x":"121.260",
//                                "y":"37.533"
//                            },
//                            {
//                                "rowkey":"mac_imsi_imei_8704",
//                                "time":"20180305",
//                                "x":"121.273",
//                                "y":"37.526"
//                            },
//                            {
//                                "rowkey":"mac_imsi_imei_8705",
//                                "time":"20180305",
//                                "x":"121.290",
//                                "y":"37.536"
//                            },
//                            {
//                                "rowkey":"mac_imsi_imei_8706",
//                                "time":"20180305",
//                                "x":"121.280",
//                                "y":" 37.516"
//                            }
//                        ]
                        let option = {
                            method: 'get',
                            url: 'fs/task/filterTaskType',
                            data: {
                                id:localStorage.uerid,
                                flag:true,
                                type:key
                                // type:87
                            }
                        }
                        this.$HttpUtil(option, res => {
                            if (res.code === 0){
                          //   console.log(res)
                            self.mapoption.chooseoptiontwo=res.data
                            }else{
                                this.$NotifyUtil({
                                    title: '失败',
                                    type: 'error'
                                })
                                //console.log('error')
                            }
                        })
//
//                        self.mapoption.chooseoptiontwo=[{x:121.280,y:37.536,rowkey:'i'},{x:121.288, y:37.536,rowkey:'i'},{x:121.273,y:37.536,rowkey:'i'}]
                    } else {
                            let indexd= -1
                            indexd=self.choseleftdata.indexOf(key)
                            if(indexd===-1){
                                return
                            }
                            self.choseleftdata.splice(indexd,1)
//                            self.mapoption.chooseoptionfalse=[{x:121.280,y:37.536,rowkey:'i'},{x:121.288, y:37.536,rowkey:'i'},{x:121.273,y:37.536,rowkey:'i'}]
//                        self.mapoption.chooseoptionfalse=[
//                            {
//                                "rowkey":"mac_imsi_imei_8703",
//                                "time":"20180305",
//                                "x":"121.260",
//                                "y":"37.533"
//                            },
//                            {
//                                "rowkey":"mac_imsi_imei_8704",
//                                "time":"20180305",
//                                "x":"121.273",
//                                "y":"37.526"
//                            },
//                            {
//                                "rowkey":"mac_imsi_imei_8705",
//                                "time":"20180305",
//                                "x":"121.290",
//                                "y":"37.536"
//                            },
//                            {
//                                "rowkey":"mac_imsi_imei_8706",
//                                "time":"20180305",
//                                "x":"121.280",
//                                "y":" 37.516"
//                            }
//                        ]
                            let option = {
                                method: 'get',
                                url: 'fs/task/filterTaskType',
                                data: {
                                    id:localStorage.uerid,
                                    flag:false,
                                    type:key
                                    // type:87
                                }
                            }
                            this.$HttpUtil(option, res => {
                                if (res.code === 0){
                                // console.log(res.data)
                                self.mapoption.chooseoptionfalse=res.data
                               }else{
                                    this.$NotifyUtil({
                                        title: '失败',
                                        message: res.msg,
                                        type: 'error'
                                    })
                                  //  console.log('error')
                                }
                            })

                            // this.splice(index, 1)

                    }
//                        var route1 = [[121.280, 37.516], [121.290, 37.536], [121.273, 37.526], [121.260, 37.533]];
//                        this.mapoption.chooseoption = route1
//                    } else {
//                        var route1 = [[121.280, 37.516], [121.290, 37.536], [121.273, 37.526], [121.260, 37.533]];
//                        this.mapoption.chooseoptionfalse = route1
//                    }

//                    if (key === '26') {
//                        if (document.getElementById(key).checked === true) {
//                            // alert(key);
//                            var route1 = [[121.280, 37.516], [121.290, 37.536], [121.273, 37.526], [121.260, 37.533]];
//                            this.mapoption.chooseoption = route1
//                        } else {
//                            var route1 = [[121.280, 37.516], [121.290, 37.536], [121.273, 37.526], [121.260, 37.533]];
//                            this.mapoption.chooseoptionfalse = route1
//                        }
//                    } else if (key === '27') {
//                        if (document.getElementById(key).checked === true) {
//                            // alert(key);
//                            var route1 = [[121.285, 37.519], [121.295, 37.539], [121.276, 37.520], [121.265, 37.532]];
//                            this.mapoption.chooseoption = route1
//                        } else {
//                            var route1 = [[121.285, 37.519], [121.295, 37.539], [121.276, 37.520], [121.265, 37.532]];
//                            this.mapoption.chooseoptionfalse = route1
//                        }
//                    }

                   // console.log(document.getElementById(key).checked)
                },
                // 左侧点击显示右侧详情的方法
                showrightdetaile(val) {
                    let self = this
                   // console.log(self.formdetail)
                //    console.log(val)
                    self.valuetime=[]
                    let option = {
                        method: 'post',
                        url: 'fs/task/getPersonDetail',
                        data: {
                            "mac":val.mac,
                            "imsi":val.imsi,
                            "imei":val.imei,
                            "taskId":val.taskid
                        }
                    }
                    self.$HttpUtil(option, res => {
                        if (res.code === 0) {
                        // console.log(res)
                        // console.log(self.choosecolor)
                        self.formdetail=res.data[0]
                        self.formdetail.imei=val.imei
                        self.formdetail.mac=val.mac
                        self.formdetail.imsi=val.imsi
                        self.formdetail.dataType = val.dataType
                        self.formdetail.choosecolor = val.t_grade
                   //     self.mapoption.peopoleendpoint = [{"x":"121.26753","y":"37.50125"}]
//                        self.peopoleendpointq=[]
//                        self.peopoleendpointq = [{"x":res.data[0].x,"y":res.data[0].y}]
                        // console.log(self.peopoleendpointq)
                        self.showdetailtask = true
                        }else{
                            self.$NotifyUtil({
                                title: '失败',
                                message: res.msg,
                                type: 'error'
                            })
                        }
                    })
                },
                // 进入人员管理的页面
                enterpeople() {
                    // this.$router.push('/peopleControle')
                    window.location='./peopleControle.html'
                },
                // 进入人员详情页面
                enterpeopledetail() {
                    // this.$router.push('/SeveralOrders')
                    window.location='./severalOrders.html'
                },
                // 显示人员轨迹的方法
                showpeopleline() {
                    let self = this
                    if(self.valuetime.length<1){
                        return
                    }else{
//                        self.mapoption.peopoleoption  =[ {
//                                    "areacode":"37061139001031",
//                                    "rowkey":"7467367510034CB54AD94",
//                                    "time":"1519627890 ",
//                                    "x":"121.275",
//                                    "y":"37.518"
//                                }, {
//                                    "areacode":"37061139001032",
//                                    "rowkey":"7467367510034CB54AD94",
//                                    "time":"1519627890 ",
//                                    "x":"121.291",
//                                    "y":"37.505"
//                                },
//                                    {
//                                        "areacode":"37061139001033",
//                                        "rowkey":"7467367510034CB54AD94",
//                                        "time":"1519627890 ",
//                                        "x":"121.2621",
//                                        "y":"37.541"
//                                    },
//                                {
//                                    "areacode":"37061139001034",
//                                    "rowkey":"7467367510034CB54AD94",
//                                    "time":"1519627890 ",
//                                    "x":"121.2822",
//                                    "y":"37.5334"
//                                }
//                                ]

                        // console.log(self.valuetime[0])
                        let option = {
                            method: 'post',
                            url: 'fs/task/getTrail',
                            data: {
                                "mac":self.formdetail.mac,
                                 // "mac":'19414254',
                                //"mac":'34CBB8CB461520519414255',
                                "imsi":self.formdetail.imsi,
                                "imei":self.formdetail.imei,
                                "star":self.valuetime[0],
                                "end":self.valuetime[1]
                            }
//                            data: {"mac":"mac123", "imsi":"imsi456", "imei":"imei789", "star":"2018-03-01 11:04:28", "end":"2018-03-01 11:04:28"}
                        }

                        self.$HttpUtil(option, res => {
                            if (res.code === 0) {
                                if(res.data.length>=1){
    //                                let arrpeopleoption=[]
    //                                for (var i=0;i<res.data.length;i++){
    //                                    //console.log(res.data[i])
    //                                    arrpeopleoption.push([res.data[i].x,res.data[i].y])
    //                                }
                                    // =console.log(arrpeopleoption)
                                    let timeArr = res.data
                                    timeArr.sort(function(a,b){  
                                            return new Date(a.time).getTime() - new Date(b.time).getTime();  
                                    })
                                    self.mapoption.peopoleoption= timeArr
                                    self.showdetailtasklinearr = timeArr
                                    // self.mapoption.peopoleoption= res.data
                                    // self.showdetailtasklinearr = res.data
                                    self.showdetailtaskline=true
                                }else{
                                    self.$NotifyUtil({
                                        title: '失败',
                                        message: '未找到人员轨迹',
                                        type: 'error',
                                        duration:3000
                                    })
                                }
                            } else{
                                self.$NotifyUtil({
                                    title: '失败',
                                    message: res.msg,
                                    type: 'error'
                                })
                            }
                        })
                    }

                },
                // 清除详情的方法
                deletexiangqing() {
                    this.$refs.selectmap.removemovePeople()
                    this.showdetailtask = false
                },
                // 清楚轨迹的数据框
                deletexiangqingline(){
                    let self = this
                    self.showdetailtaskline=false
                },
                // websocket 推送进行接收数据处理方法
                intiline() {
                    let self = this
                    // 10.50.141.246:8090/law/
                    //192.168.88.117:9999
                    // 172.20.8.7:9999
                    var ws = new WebSocket("ws://192.168.0.150:9999/my-websocket?userId=" + localStorage.uerid);
                    //监听推送消息
                    ws.onmessage = function (event) {
                        var data=JSON.parse(event.data);
                         // console.log(data)
                        // 总人数
                        self.warnsum = data.warnSum.v
                        // 推送消息浮框的方法
                        if(data.msglist.length>=1){
                            for(var i=0;i<data.msglist.length;i++){
                                // console.log(data.msglist[i].uList.length)
                                if(data.msglist[i].uList.length>=1){
                                    let cd=''
                                    let ic= ''
                                    let inout = '进入'
                                    for(var l=0;l<data.msglist[i].uList.length;l++){
                                        self.celeft.unshift(data.msglist[i].uList[l])
                                        //   ic = data.msglist[i].uList[l].imei | self.ImeiFiltersc(data.msglist[i].uList[l].imsi,data.msglist[i].uList[l].imac)
                                        //   console.log(data.msglist[i].uList[l].imac)
                                        if(data.msglist[i].uList[l].dataType === 'imsi') ic = 'imsi:'+data.msglist[i].uList[l].imsi
                                        else if(data.msglist[i].uList[l].dataType === 'imei') ic = 'imei:'+data.msglist[i].uList[l].imei
                                        else if(data.msglist[i].uList[l].dataType === 'mac') ic = 'mac:'+data.msglist[i].uList[l].mac
                                        else ic =  '其他'
                                        if(data.msglist[i].uList[l].flag == '1'){
                                            inout = '进入'
                                        } 
                                        else if(data.msglist[i].uList[l].flag == '2'){
                                            inout = '离开'
                                        }
                                        cd+= '<p style="line-height:46px;font-size:20px;color:#da1515;">'+data.msglist[i].uList[l].tasktypename+'</p>'+
                                                '<p style="line-height:30px;font-size:16px;color:#01a7eb;">'+ ic + inout +'辖区</p>'+
                                                ' <p style="line-height:30px;font-size:16px;color:#01a7eb;">'+data.msglist[i].uList[l].date+'</p>'
                                    }
                                    for(var j=0;j<data.msglist[i].t_warning_number;j++){
                                        setTimeout(() => {
                                            self.$notify({
                                            title: '系统警告',
                                            dangerouslyUseHTMLString: true,
                                            position: 'bottom-right',
                                            duration: 3000,
                                            message:'<div>'+cd+'</div>'
                                        });
                                        },j*data.msglist[i].t_warning_fm);
                                    }
                                }
                            }
                        }
                        //上面的滚动的数据获取
                        if(data.sumList.length>=1){
                            self.cetop=[]
                            self.cetop=data.sumList
                        }
                        // 处理超过50条数据
                        self.celeft.splice(50,self.celeft.length-50)
                        // 处理新增的点
                        let dataadd=[]
                      //  console.log(self.choseleftdata)
                        if( self.choseleftdata.length>0 && data.device.addlist.length>=1){
                            for(let i=0;i<data.device.addlist.length;i++){
                                if(self.choseleftdata.indexOf(data.device.addlist[i].tasktypeid+'')>-1){
                                    // console.log(data.device.addlist[i])
                                    dataadd.push(data.device.addlist[i])
                                }
                            }
                        }
                        self.mapoption.chooseoption=dataadd
                        // 处理删除的点
                        if(data.device.pluslist.length>0){
                            self.mapoption.chooseoptionfalse=data.device.pluslist
                        }
                    };
                    // 关闭websocket
                    ws.onclose = function (evt) {
                    };
                    ws.onerror = function (evt) {
                        //  alert(evt.data);
                    };
                },
                //  获取swiper的宽度
                getSwiperWidth(){
                    let box = this.$refs.slider.children
                    let length = 0;
                    for(let item of box){
                        length += item.offsetWidth+box[0].offsetLeft
                        // console.log(length)
                    }
                    // console.log(length)
                    this.$refs.slider.style.width = length+10 +'px'
                    this.$refs.swiper.style.width = 2*(length+10) +'px'
                },
                //  滚动的调用方法
                slideSwiper(){
                    let boxWidth = this.$refs.swipercontainer.offsetWidth
                    let sliderWidth = this.$refs.slider.offsetWidth
                    let child = this.$refs.slider.children
                    let self = this
                    if(sliderWidth !==0){
                        $('#my-swiper').animate({left:'-=1'},10,function(){
                            let left = $('#my-swiper').css('left').split('px')[0]
                            if (-left >= sliderWidth){
                                $('#my-swiper').css('left',0)
                                self.slideSwiper()
                            }
                            if(child.length<6){
                                $('#my-swiper').css('left',0)
                                return false
                            }
                            self.slideSwiper()
                        })
                    }

                },
                //  返回代码
                goBack(){
                    window.location.href = 'login.html'
                },
                showendpoint(){
                    let self = this
                    self.mapoption.peopoleendpoint = self.formdetail
                }
                    // alert(1)
                    // let self = this
                    // let option = {
                    //     method: 'post',
                    //     url: 'fs/task/getRecentTrail',
                    //     data: {
                    //         "mac":self.formdetail.mac,
                    //         "imsi":self.formdetail.imsi,
                    //         "imei":self.formdetail.imei
                    //     }
                    // }
                    // self.$HttpUtil(option, res => {
                    //     if (res.code === 0) {
                    //         console.log(res.code)
                    //         if(res.data.length>=1){
//                                {
//                                    "devicecode":"80006",
//                                    "rowkey":"460028638091726000000000000001521209562000",
//                                    "time":"2609-06-28 19:23:41",
//                                    "x":"121.273070",
//                                    "y":"37.534020"
//                                }
                              //  res.data
//                                self.peopoleendpointq=[]
//                                self.mapoption.peopoleendpoint = [{"x":"121.26753","y":"37.50125"}]
                //             }else{
                //                 self.$NotifyUtil({
                //                     title: '失败',
                //                     message: '没有找到最后帝天',
                //                     type: 'error',
                //                     duration:3000
                //                 })
                //             }
                //         } else{
                //             self.$NotifyUtil({
                //                 title: '失败',
                //                 message: res.msg,
                //                 type: 'error'
                //             })
                //         }
                //     })

                // }
            },
            computed: {
                // 时间的数据计算
                tabdata() {
                    let a = this.numberall + ''
                    return a.split('')
                }
            },
            watch: {},
            updated: function() {
               // console.log(this.$refs.slider.children.length)
                // 调用滚动动画的方法
                if(this.$refs.slider.children.length>5){
                    this.getSwiperWidth()
                    this.slideSwiper()
                }
            },
            components: {},
            filters: {
                inout(val){
                    if(val=='1') return '进入'
                    else if(val=='2') return '离开'
                    return '进入'
                },
                // 过滤器对应的上面颜色的
                chosecolor(item) {
                    switch (item) {
                        case 'nia1':
                            return 'tcolorone'
                        case 'nia2':
                            return 'tcolortwo'
                    }
                },
                // 过滤器对应的上面颜色的
                chosecolortwo(item) {
                   // let self = this
                    switch (item+'') {
                        case '1':
                            return 'lcolorone'
                        case '2':
                            return 'lcolortwo'
                        case '3':
                            return 'lcolorthree'
                        case '4':
                            return 'lcolorfour'
                    }
                },
                // 过滤器左侧数据的选择个
                ImeiFilters(arg1,arg2,arg3){
                    if(arg1 !=='')return arg1
                    if(arg2 !=='')return arg2
                    if(arg3 !=='')return arg3
                    return '其他'
                },
                // 过滤器详情页面的数据
                ImeiFiltersc(arg1,arg2,arg3){
                    if(arg1 !=='')return 'imei：'+arg1
                    if(arg2 !=='')return 'imsi：'+arg2
                    if(arg3 !=='')return 'mac：'+arg3
                    return '其他'
                }
            }
        })

    </script>
</body>

</html>